<script setup>
const props = defineProps({
  title: {
    type: String,
    default: "个人博客与简历",
  },
  description: {
    type: String,
    default: "全栈开发者的个人网站，分享技术博客、项目作品集和个人简历。",
  },
  image: {
    type: String,
    default: "/images/og-image.jpg",
  },
  url: {
    type: String,
    default: "",
  },
});

const route = useRoute();
const baseUrl = "https://yourdomain.com"; // 替换为您的实际域名
const pageUrl = computed(() => props.url || `${baseUrl}${route.fullPath}`);
</script>

<template>
  <Head>
    <Title>{{ title }}</Title>
    <Meta name="description" :content="description" />

    <!-- Open Graph / Facebook -->
    <Meta property="og:type" content="website" />
    <Meta property="og:url" :content="pageUrl" />
    <Meta property="og:title" :content="title" />
    <Meta property="og:description" :content="description" />
    <Meta property="og:image" :content="`${baseUrl}${image}`" />

    <!-- Twitter -->
    <Meta property="twitter:card" content="summary_large_image" />
    <Meta property="twitter:url" :content="pageUrl" />
    <Meta property="twitter:title" :content="title" />
    <Meta property="twitter:description" :content="description" />
    <Meta property="twitter:image" :content="`${baseUrl}${image}`" />
  </Head>
</template>
